<template>
    <view class="" style="background-color: #F2F2F2; width: 100%;">
		
		
		<!-- 小程序顶部样式 -->
		<cu-custom bgColor="bg-gradual-orange" :isBack="false">
			<block slot="left">
				<text @tap="toPage()" class="cuIcon-peoplefill" style="font-size: 40rpx;"></text>
			</block>
			<block slot="content">首页</block>
		</cu-custom>
		
		<view :class="(token && category && dic) ? 'display' : ''" style=";z-index:100;">
			<view class="uni-flex uni-column" style="height:100vh;justify-content: center;align-items: center;">
				<text>
					正在加载
				</text>	
			</view>
		</view>
		
		<!-- 未授权获取位置 -->
		<view class="cu-modal bottom-modal" :class="modalName=='bottomModal'?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white">
					<view>
						<button class="action text-green setting-btn" open-type="openSetting" 
						bindopensetting="toSetting">确定</button>
					</view>
				</view>
				<view class="padding-xl">
					您未授权获取您的位置信息，小程序将无法正常运行，请您点击确定选择位置信息
				</view>
			</view>
		</view>
		
		<view>
			<!-- 分类组件 -->
			<scrollBar></scrollBar>
			<!-- 位置input -->
			<view class="cu-card case">
				<view class="cu-item shadow">
					<view class="flex justify-start align-center" @tap="chooseLocation" style="height: 100rpx;">
						<view style="margin-left: 30rpx;">
							<input placeholder="请输入维修地址" name="input" :value="locationName"></input>
						</view>
						<view style="position: absolute;right: 50rpx;">
							<text style="font-size: 40rpx;" class="text-gray cuIcon-right"></text>
						</view>
					</view>
				</view>
			</view>
			
			<!-- 图片区 -->
			<takePhotos></takePhotos>
			
			<view style="margin-top: 30upx;">
				<view class="uni-flex uni-column" style="justify-content: center;align-items: center;height: 80upx;background-color: white;">
					<view style="font-size: 40upx;">
						¥{{ amount }}
					</view>
				</view>
				<view>
					<!-- 有用户，没有手机号，显示获取手机号按钮，获取手机号后提交表单 -->
					<view v-if="!userInfo.mobile">
						<button type="primary" class="#ff7c00" open-type="getPhoneNumber" @getphonenumber="getphonenumber">现在下单2</button>
					</view>
					<!-- 有用户，有手机号,提交表单 -->
					<view v-else-if="userInfo.mobile">
						<button style="background-color: #ff7c00;" open-type="switchTab" type="primary" class="primary" @tap="saveOrder">现在下单3</button>
					</view>
				</view>
			</view>
		</view>
		
		
		
    </view>
</template>

<script>
	
	import scrollBar from '../../components/scrollBar'
	import takePhotos from '../../components/takePhotos'
	
	import util from '../../common/util.js'
	
    import {
        mapState,
		mapMutations
    } from 'vuex'

    export default {
		components:{
			scrollBar,
			takePhotos
		},
		data() {
			return {
				remark: "",
				userInfo:{},
				locationName: '',
				modalName: '',
				old: {
					scrollTop: 0,
				}
			}
		},
        computed: {
			...mapState(['order']),
			amount: function(){
				// 页面底部显示价格：服务类别费用 + 跑腿费
				return Number(this.order.serviceFee) + Number(util.getDicByKey('tip'))
			},
			token: () => uni.getStorageSync('token'),
			category: () => uni.getStorageSync('tabBars'),
			dic: () => uni.getStorageSync('dictionary')
		},
        onLoad() {		
			this.userInfo = uni.getStorageSync("userInfo");
        },
		onShow() {
			this.modalName = ''
		},
		methods:{
			...mapMutations(['setLocation']),
			toSetting(){
				uni.openSetting({
					success(res) {
						console.log(res)
					}
				})
			},
			chooseLocation(){
				let that = this
				uni.chooseLocation({
					success: function (res) {
						that.modalName = ''
						that.locationName = res.name
						that.$store.commit('setLocation', res)
						that.setLocation(res)
					},
					fail(e) {
						that.modalName = 'bottomModal'
					}
				});
			},
			toPage(){
				uni.navigateTo({
					url:'../user/user'
				})
			},
			saveOrder(){
				
				if(this.userInfo == undefined || this.userInfo.nickName == undefined){
					uni.navigateTo({
						url: '../user/user'
					})
					return ;
				}
				
				if(! this.order.location.address){
					uni.showToast({
						title: '请点击输入维修地址！',
						duration: 2000,
						icon: "none"
					});
					return ;
				}
				
				if(this.order.photos.length == 0){
					uni.showToast({
						title: '请拍摄故障照片！',
						duration: 2000,
						icon: "none"
					});
					return ;
				}
				uni.navigateTo({
					url: '../orderConfirm/orderConfirm'
				});
				
			},
			getphonenumber(res){
				if(res && res.detail && res.detail.errMsg.toString().indexOf('ok') == -1){
					console.log('获取用户手机号失败--:', res)
					uni.navigateTo({
						url: '../mobileLogin/mobileLogin'
					})
				}else{
					// 成功获取手机号，传给服务器保存
				}
			},
			scroll(e) {
				console.log(e)
				this.old.scrollTop = e.detail.scrollTop
			}
		}
    }
</script>

<style>
	.display{
		display: none;
	}
	
	.uni-placeholder-class{
		font-size: 30upx;
	}
	
	.uni-location-input{
		line-height: 40upx;
	}
	
	.uni-icon-class{
		margin-top:-10upx;
		margin-left:300upx;
	}
	
	.line-h {
	    height: 1upx;
	    background-color: #cccccc;
	}
	
	.setting-btn{
		background-color: unset;
		border: unset;
		position: unset;
	}
	
</style>
